<template>
    <div>
        <vue-particles id="tsparticles" :particlesLoaded="particlesLoaded" :options="options" />
        <div class="formContainer">
            <h3>xx系统</h3>
            <el-form ref="loginFormRef" :model="loginForm" :rules="rules" label-width="120px" class="loginForm"
                :size="formSize" status-icon>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="loginForm.username" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" show-password />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(loginFormRef)">登录</el-button>
                    <el-button @click="resetForm(loginFormRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import options from '../util/particle-options-fireworks-preset'
import { vscode } from '../util/vscode'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
const formSize = ref('default')

const loginFormRef = ref('loginFormRef')
const loginForm = reactive({
    username: 'candywall',
    password: '123456'
})

const rules = reactive({
    username: [
        { required: true, message: '用户名不为空！', trigger: 'blur' },
        { min: 3, max: 20, message: '用户名长度在3到20个字符之间', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '密码不为空！', trigger: 'blur' },
        { min: 3, max: 16, message: '用户名长度在3到16个字符之间', trigger: 'blur' }
    ]
})

import { useRouter } from 'vue-router'
const router = useRouter()

const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        // 跳转到首页
        router.push('/mainbox')
        vscode.postMessage({
            command: 'alert',
            text: '用户登录成功！'
        });
    })
}

const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}

// npm run dev:web调试方法
// 可以通过在浏览器控制台输入以下代码片段手动触发message事件
// window.dispatchEvent(new CustomEvent('message', {
//     detail: {
//         command: 'showCheckResult',
//         data: {
//             a: 'bbb'
//         }
//     }
// }))
window.addEventListener('message', e => {
    console.log(e.message || e.detail)
    ElMessage.info(JSON.stringify(e.message || e.detail))
})
</script>

<style lang="scss" scoped>
.formContainer {
    width: 500px;
    height: 250px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba($color: #ffffff, $alpha: 0.1);
    text-align: center;
    padding: 20px;

    h3 {
        color: white;
        font-size: 30px;
    }

    .loginForm {
        margin-top: 20px;
    }

    /**
        解决样式不生效的问题 
        :deep() 是用于处理深度选择器的 SCSS 特殊语法，它能够在样式嵌套较深的情况下影响到子组件内的样式。
    */
    :deep(.el-form-item__label) {
        color: white;
    }
}
</style>